<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  units: {
    type: Array,
    requied: true,
  }
});

const onlyRef = ref(null);
let myChart = null;

onMounted(() => {
  myChart = echarts.init(onlyRef.value);
  option.series = {};
  loadChart();
});

const loadChart = () => {
  const NGS = props.units.filter(i => i.warn_number).length;
  const datas = [
    { name: '不达标', value: NGS },
    { name: '达标', value: props.units.length - NGS },
  ];
  option.legend.data = datas.map(i => i.name);
  option.series = {
    type: 'pie',
    data: datas,
    radius: '55%',
    center: ['50%', '40%'],
    label: {
      show: true,
      position: 'outside',    // 标签显示在饼图外部
      formatter: '{d|{d}%}\u00A0\u00A0{b|{b}}', // 显示标签内容：百分比、名称
      alignTo: 'labelLine',   // 标签对齐边缘
      color: 'auto',
      rich: {
        d: {
          fontSize: 12,       // 百分比的字体大小
        },
        b: {
          fontSize: 12,       // 百分比的字体大小
        }
      },
    },
    labelLine: {
      show: true,             // 显示引导线
    },
    animationType: 'scale',
    animationEasing: 'elasticOut',
    animationDelay: function (idx) {
      return Math.random() * 200;
    },
  };
  myChart.setOption(option);
}

const option = {
  animation: true,										  	  //是否开启动画
  backgroundColor: 'rgba(0, 18, 24, 0)',    //无背景颜色
  color: ['#FAC858', '#5470C6'],
  series: {},                               //系列
  tooltip: {
    trigger: 'item',
    backgroundColor: '#003F55',
    borderColor: '#00829E',
    padding: 12,
    formatter: function (params) {
      // 计算百分比
      const percent = ((params.value / props.units.length) * 100).toFixed(1); // 保留两位小数
      return `${params.marker} ${params.name}: <span class="value">${percent}</span> %`;
    },
    textStyle: {
      color: 'rgba(255,255,255,0.65)',
      fontSize: 12,
    }
  },
  grid: {
    containLabel: true,                 //为true表示外边 距离 包含刻度标签在内的整个图表
    bottom: 30,                         //网格离容器底部距离
    right: 24,                          //网格离容器右侧距离
    left: 12,                           //网格离容器左侧距离
    top: 30,                            //网格离容器顶部距离
  },
  legend: {
    bottom: 20,
    left: 'center',
    itemGap: 12,
    itemWidth: 8,
    itemHeight: 8,
    icon: 'circle',
    textStyle: {
      color: 'rgba(255,255,255,0.6)',
      fontSize: 12,
    },
  },
}
</script>

<template>
  <div class="box flex-column">
    <label>公厕环境达标率</label>
    <div class="e-box" ref="onlyRef" />
  </div>
  
</template>

<style lang="scss" scoped>
.box {
  width: 460px;
  height: 250px;
  background: #001218;
  box-shadow: inset 0 0 20px rgba(0, 130, 158, 0.5);
  border: 1px solid rgba(0, 130, 158, 0.5);
  opacity: 0.8;
  position: relative;
  padding: 20px 20px 0;
  label {
    font-weight: 500;
    font-size: 18px;
    color: #00FFFF;
  }
  .e-box {
    flex: 1;
  }
}
</style>
<style scoped>
:deep(.value) {
  font-weight: 600;
  font-size: 12px;
  color: #FFFFFF;
}
</style>